<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="这是一个说明文档-搜索结果里的描述内容">
<title>这是网页的标题</title>
<link href="main.css" rel="stylesheet" type="text/css" />
<!--
<style type="text/css">
h3{color: aqua}
</style>
内建css
-->
</head>

<body>
<div id="mainbody" style="width:600px;float:left;border:1px solid #ccc;margin-right: 20px;padding:10px"> 
  <img src="../wechat.jpg" alt="这是图片的描述" align="left" hspace="10px" width="300px" /> 
  <!-- src是图片链接 alt 是图片的描述 align 是对齐方式 hspace 是周围空出距离-->
	<h2 style="color: aqua">这是一个<a href="https://www.baidu.com/" target="_blank">大标题</a></h2>
	<!--target属性 _blank在新标签页打开 -->
  <p class="new123">这是网页的内容 <br />
    很长的一大段<br />
	<span style="color: aqua;font-weight: bold">br</span>是一个换行</p>
	<!--span是一个行内标签，不会换行，可以用来修饰段落中的某一段话 font-weight 字体粗细-->
</div>
<div id="sidebar" style="weidth:300px;float:left;border:1px solid #ccc;padding:10px">
  <h3>大标题</h3>
  <ul>
	  <li><a>列表1</a></li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
  </ul>
  <ol>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
  </ol>
  <!--ul 无序列表 ol 有序列表--> 
</div>

</body>
</html>
